<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="../common/cr-action.html">
<link rel="import" href="../common/cr-butterbar.html">
<link rel="import" href="../components/cr-issue-inbox.html">

<polymer-element name="cr-inbox-view">
    <template>
        <link rel="stylesheet" href="../common/common.css">
        <style>
            :host { display: block; }

            header {
                display: -webkit-flex;
                display: flex;
                align-items: center;
                -webkit-align-items: center;
            }

            .app-header {
                flex: 1;
                -webkit-flex: 1;
            }

            .filter-form {
                display: -webkit-flex;
                display: flex;
                margin: 0 16px;
                align-items: center;
                -webkit-align-items: center;
            }

            .filter-form label {
                font-weight: bold;
                color: #959595;
                -webkit-user-select: none;
                cursor: default;
                white-space: nowrap;
                margin-right: 8px;
            }

            .form-field {
                margin: 0 8px;
            }

            .login-prompt {
                text-align: center;
                display: none;
                padding: 1em;
                font-size: 1.8em;
            }

            :host-context(.no-login) .login-prompt {
                display: block;
            }

            @media (max-width: 600px) {
                header {
                    display: block;
                }

                .form-field:first-child,
                #filter-form {
                    margin: 0;
                }
            }
        </style>
        <cr-butterbar message="{{ butterbarMessage }}"></cr-butterbar>
        <div class="login-prompt">
            <p><a is="cr-action" on-tap="{{ login }}">Login</a> to view your issues.</p>
        </div>
        <template if="{{ issues }}">
            <header>
                <h1 class="app-header">My Issues</h1>
                <div class="filter-form">
                    <div class="form-field">
                        <label for="recent-activity">
                            Highlight activity
                        </label>
                        <input id="recent-activity" type="checkbox" checked="{{ showRecentActivity }}">
                    </div>
                    <div class="form-field">
                        <label for="filter">
                            Filter
                        </label>
                        <select id="filter" value="{{ filter }}">
                            <option value="today">Today</option>
                            <option value="0">Past week</option>
                            <option value="2">2 weeks</option>
                            <option value="4">4 weeks</option>
                            <option value="all">All issues</option>
                        </select>
                    </div>
                </div>
            </header>
            <cr-issue-inbox issues="{{ issues }}" weeks="{{ filter }}" showRecentActivity="{{ showRecentActivity }}"></cr-issue-inbox>
        </template>
    </template>
    <script>
    (function() {
        var FILTER_KEY = "cr-inbox-view.filter";
        var SHOW_RECENT_ACTIVITY_KEY = "cr-inbox-view.showRecentActivity";

        Polymer({
            created: function() {
                this.filter = "2";
                this.showRecentActivity = false;
                this.issues = null;
                this.loading = true;
                this.butterbarMessage = "";
            },
            attached: function() {
                var self = this;
                this.fire("title-change", {
                    value: "My issues"
                });
                User.loadCurrentUser({cached: true}).then(function() {
                    self.loadInbox();
                });
            },
            loadInbox: function() {
                this.filter = localStorage.getItem(FILTER_KEY) || this.filter;
                this.showRecentActivity = localStorage.getItem(SHOW_RECENT_ACTIVITY_KEY) == "true";
                this.issues = new IssueList(User.current, {
                    cached: true,
                });
                this.loadIssues();
            },
            filterChanged: function() {
                localStorage.setItem(FILTER_KEY, this.filter);
            },
            showRecentActivityChanged: function(oldValue, newValue) {
                localStorage.setItem(SHOW_RECENT_ACTIVITY_KEY, this.showRecentActivity);
            },
            loadIssues: function() {
                var self = this;
                this.butterbarMessage = "Loading your issues.";
                this.issues.loadIssues().then(function() {
                    self.butterbarMessage = "";
                }).catch(function(error) {
                    console.log(error);
                    self.butterbarMessage = "Failed to load issues. :(";
                });
            },
            login: function() {
                this.fire("login");
            },
        });
    })();
    </script>
</polymer-element>
